<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>全屏扩展卡片</title>
    <link href="./style.css" rel='stylesheet'>
    <link href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
</head>
<body>
    <div class="wrapper">
        <div class="book">
            <div class="book__cover">
                <div class="header-image">
                    <div class="overlay"></div>
                </div>
                <div class="title-wrap">
                    <h1 class="article-title">
                        BMW SHOWCASE
                    </h1>
                </div>
                <p class="book__cover-expert">
                    Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ullam fugiat vitae sapiente corporis officia voluptas aspernatur iure. Et ipsum facilis, dignissimos blanditiis officiis itaque sapiente, temporibus quo voluptatibus veniam doloribus.
                
                <br><br>
                <span class="social">
                    <i class="fa fa-facebook"></i>
                    <i class="fa fa-twitter"></i>
                    <i class="fa fa-linkedin"></i>
                    <i class="fa fa-instagram"></i>
                </span>
                </p>
            </div>

            <div class="book__content">
                <p><span class="drop-cap">0</span>
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit molestiae cupiditate nihil. Ducimus accusantium eos soluta nostrum obcaecati laborum, cupiditate esse voluptatem, dicta consectetur ipsam facere excepturi, molestias maxime odit.
                </p>

                <p>
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi quas in id ratione tenetur sint, fugit perspiciatis animi eos iusto ipsam nemo delectus odio, quisquam dolor vel eum sequi dicta?
                </p>
                <p>
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Pariatur voluptatibus vitae autem omnis cupiditate tempora rem illo qui inventore sit animi quas et architecto laboriosam nobis repudiandae necessitatibus ab hic nesciunt, veniam perspiciatis obcaecati laborum officia! Maiores, labore? Fugiat eaque ipsam, architecto omnis hic repudiandae doloribus laudantium. Autem, unde praesentium?
                </p>

                <p>
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Exercitationem, nostrum laborum officia quisquam architecto consequuntur illum esse ad, sed omnis molestias qui delectus quis deleniti temporibus similique voluptas hic. Omnis iure est nam quisquam. Enim est deserunt molestiae nostrum rem ut, modi reprehenderit amet ducimus id. Minima, facilis! Tempore repudiandae fugiat nihil, non amet accusamus suscipit id doloribus sint sunt veniam autem vel blanditiis doloremque distinctio quod quasi perspiciatis modi iste minima asperiores ullam sed. Incidunt iusto omnis sapiente vel!
                </p>
            </div>
        </div>
    </div>
</body>
<script>
    'use script'
    $('.book').on('click',function(){
        $(this).toggleClass('book--expanded')
    })
</script>
</html>